<template>
	<view class="fy-item-list full-width flex-center-column">
		<view class="fy-item flex-center shadow-warp" v-for="item,index in list" :style="'background:url('+item.music_cover+');background-position:center center;background-size:cover;'" :key="index" @click="go(index)">
			<view class="overlay animation-reverse animation-fade" v-if="!item.status"></view>
			<view class="vip bg-black flex-center shadow-warp" v-if="item.is_need_video==1">
				<text class="cuIcon-crownfill text-yellow margin-right-xs" style="font-size: 12px;"></text><text style="font-size: 12px;" class="text-yellow">VIP</text>
			</view>
			<view class="info flex-center" @tap.stop @click.stop @click="showInfo(index)">
				<view>
					<text class="cuIcon-infofill text-grey"></text>
				</view>
				
			</view>
			<view class="go flex-center" v-if="baseConfig==0" @tap.stop @click.stop @click="go(index)">
				<image v-if="!item.status" class="play-icon" :src="c_icon"></image>
				<image v-if="item.status" class="play-icon" :src="d_icon"></image>
			</view>
			<view class="wave" v-if="item.status&&baseConfig==0">
				<ul class="aubox">
					<li class="au1 auItem"></li>
					<li class="au2 auItem"></li>
					<li class="au3 auItem"></li>
					<li class="au4 auItem"></li>
					<li class="au5 auItem"></li>
					<li class="au6 auItem"></li>
					<li class="au7 auItem"></li>
				</ul>
			</view>
		</view>
		<view style="margin-bottom:66px;margin-top:1em;padding:0em .5em;width: 100%;border-radius: 10px;" v-if="bannerId">
			<ad :unit-id="bannerId"></ad>
		</view>
		<view class="cu-modal" v-if="list[currentIndex]" :class="modalName=='info'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{list[currentIndex].music_title}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-blue"></text>
					</view>
				</view>
				<view class="padding-xl" style="max-height: 500px;overflow-y: auto;">
					<rich-text :nodes="list[currentIndex].music_intro"></rich-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"fy-item-list",
		props:{
			bannerId:{
				type:String,
				default:null
			},
			mingxiangList:{
				type:Array,
				default:[]
			},
			baseConfig:{
				type:Number,
				default:1
			},
			userinfo:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				modalName:"",
				audioCtx:null,
				list:this.mingxiangList,
				currentIndex:0,
				c_icon:null,
				d_icon:null
			};
		},
		created() {
			this.init();
		},
		mounted() {
			if(this.audioCtx){
				for (let i = 0; i < this.list.length; i++) {
					if(this.list[i].music_url==this.audioCtx.src){
						this.list[i].status = true;
					}
				}
			}
		},
		methods:{
			hideModal(){
				this.modalName = "";
			},
			init(){
				if(this.baseConfig==0){
					this.c_icon = this.$config.site_url+'/static/images/c.png';
					this.d_icon = this.$config.site_url+'/static/images/d.png';
				}else{
					this.c_icon = this.$config.site_url+'/static/images/verify_c.png';
					this.d_icon = this.$config.site_url+'/static/images/verify_d.png';
				}
				if(this.list.length>0){
					//#ifdef H5
					this.audioCtx = uni.createInnerAudioContext();
					//#endif
					//#ifdef MP-WEIXIN
					this.audioCtx = uni.getBackgroundAudioManager();
					//#endif
					this.audioCtx.onEnded(this.onEndedHandler.bind(this));
					this.audioCtx.onPlay(this.onPlayHandler.bind(this));
					this.audioCtx.onTimeUpdate(this.onTimeUpdateHandler.bind(this));
				}
			},
			isUserLogin(){
				if (typeof(this.userinfo) == "undefined" || this.userinfo == "" || JSON.stringify(this.userinfo) == "{}" || this.userinfo==null) {
					return false;
				} else {
					return true;
				}
			},
			onPlayHandler(e){
				
			},
			onTimeUpdateHandler(e){
				
			},
			onEndedHandler(e){
				this.list[this.currentIndex].status = false;
			},
			showInfo(){
				this.modalName = "info";
			},
			go(index){
				this.currentIndex = index;
				this.$emit('back')
				return
				if(this.baseConfig==1){
					this.showInfo()
					return;
				}
				let today = this.getToday();
				let isFinishVideo = uni.getStorageSync(today);
				if(this.isUserLogin()){
					console.log(this.userinfo)
					if(this.userinfo.is_vip==0){
						if(isFinishVideo){
							if(isFinishVideo=='already'){
								this.userinfo.is_vip = 1;
							}else{
								this.userinfo.is_vip = 0;
							}
						}else{
							this.userinfo.is_vip = 0;
						}
					}
				}
				//需要观看激励视频
				//201用户登录但非会员
				//202用户未登录
				if(this.list[index].is_need_video==1){
					if(this.isUserLogin()){
						if(this.userinfo.is_vip!=1){
							this.$emit("notVip",201);
							return;
						}
					}else{
						this.$emit("notVip",202);
						return;
					}
				}
				console.log(this.list[index])
				if(this.list[index].status){
					this.audioCtx.pause();
					this.list[index].status = false;
				}else{
					this.audioCtx.title = this.list[index].music_title;
					this.audioCtx.singer = '催眠冥想';
					this.audioCtx.coverImgUrl = this.list[index].music_icon;
					if(this.audioCtx.src!=this.list[index].music_url){
						this.audioCtx.src = this.list[index].music_url;
					}else{
						this.audioCtx.play();
					}
					
					this.list[index].status = true;
					
					for (let i = 0; i < this.list.length; i++) {
						if(index!=i){
							this.list[i].status = false;
						}
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.fy-item-list {
		margin-top: 80px;
		.fy-item {
			border-radius: 10px;
			margin-top: 1em;
			width: 95%;
			height: 130px;
			.overlay {
				width: 100%;
				height: 100%;
				background-color: #333;
				opacity: .5;
				border-radius: 10px;
			}
			.vip {
				position:absolute;
				right: 0;
				top: 0;
				width: 50px;
				height:20px;
				border-radius:0px 10px 0px 10px;
			}
			.info {
				position:absolute;
				right: .5em;
				bottom: .4em;
			}
			.go {
				position:absolute;
				right: 2em;
				bottom: .5em;
				.play-icon {
					width: 15px;
					height: 15px;
				}
			}
			.wave {
				position:absolute;
				left: .5em;
				bottom: .5em;
				.aubox{
					display: flex;
					align-items: flex-end;  //重要属性，让hight翻转过来，往上延伸
					.auItem{
						width: 1px;
						margin-right: 5px;
						list-style: none;
						background: #8799a3;
						height:15px;
					}
					.au1{
						animation: audio .5s linear .1s infinite alternate;
					}
					.au2{
						animation: audio .5s linear .2s infinite alternate;
					}
					.au3{
						animation: audio .5s linear .5s infinite alternate;
					}
					.au4{
						
					}
					.au5{
						animation: audio .5s linear .2s infinite alternate;
					}
					.au6{
						animation: audio .5s linear .3s infinite alternate;
					}
					.au7{
						animation: audio .5s linear .1s infinite alternate;
					}
					@keyframes audio{
						from{height: 1px;}
						to{height: 15px;}
					}
					
				}
			}
		}
	}
</style>